プログラミングせずにCognitoで新規ユーザー登録＆サインインを試してみる

Amazon Cognitoってユーザー認証をマネージドに管理してくれるサービスでさわってみたいけど、
新規ユーザー登録画面やサインイン画面をプログラミングするイメージがあって、非プログラマーには敷居が高いんだよなぁ……。

---

そんなあなたのために、このブログを書きました。

Cognitoの敷居をちょっと下げるため、プログラミング無しでCognitoを試してみます。

要するに、AWS CLIでCognitoを使う手順を紹介します。

Cognitoの機能自体は、弊社ブログで詳しく解説しているのでぜひこちらを御覧ください。

• Amazon Cognito と仲良くなるために歴史と機能を整理したし、 Cognito User Pools と API Gateway の連携も試した ｜ DevelopersIO

AWS構成図

こんな感じの構成をマネジメントコンソールから作ります。
そして、AWS CLIを利用して新規ユーザー登録（サインアップ）とサインイン、curlコマンドを利用してAPI Gatewayの認証を試してみます。

構築手順

Cognitoユーザープールを作成する

CognitoではユーザープールとIDプールが提供されていますが、 今回はユーザープールを作成します。

プール名を適当に入力し、「デフォルトを確認する」を選択して次へ進みます。

設定はデフォルト値のままとして、「プールの作成」をします。

ユーザープールを作成すると、プールIDが発行されます。のちほど使用するのでメモしておきます。

次にアプリクライアントを作成します。

アプリクライアント名は適当に入力し、「サーバーベースの認証でサインイン API を有効にする (ADMIN_NO_SRP_AUTH)」にだけチェックを入れて、「アプリクライントの作成」をクリックします。

アプリクライントを作成すると、アプリクライアントIDが発行されます。のちほど使用するのでメモしておきます。

API Gatewayを作成する

APIの例を利用して「PetStore」のAPI Gatewayを作成します。

API Gatewayが作成できたら、オーサライザーを作成します。

名前は適当に設定して、タイプはCognitoを選択します。 Cognitoユーザープールには先ほど作成したCognitoユーザープール名を入力します。 トークンのソースは、「Authorization」とします。

次に認証の設定をします。今回はペット一覧を取得するGETメソッドに認証をかけます。
「リソース」→「/petsのGET」→「メソッドリクエスト」の順にクリックしていきます。

「認可」の項目で、先ほど作成したオーサライザーを選択して、チェックマークをクリックします。

次にAPI Gatewayのデプロイをします。 「アクション」から「APIのデプロイ」を選択します。

ステージ名を適当に設定して、デプロイします。

デプロイが終わると、APIにアクセスするためのURLが発行されます。

このURLに curl コマンドで /pets にアクセスしてみると、認証できていないためUnauthorizedになることがわかります。

$ API_GATEWAY_URL=https://xxxxxxxxxx.execute-api.us-west-2.amazonaws.com/test
$ curl ${API_GATEWAY_URL}/pets
{"message":"Unauthorized"}

Cognitoをオーサライザーに設定している場合、Authorizationヘッダに、Cognitoで発行した期限切れでないIDトークンを指定することでAPIが呼び出せます。このAPI Gatewayにアクセスできるよう、Cognitoでサインアップとサインイン（IDトークンの取得）をやっていきます。

• Amazon Cognito ユーザープールに統合された REST API を呼び出す - Amazon API Gateway

Cognitoのサインアップ

Cognitoユーザープールを作ったばかりで、ユーザーがいないので新規ユーザーを作ります。
AWS CLIでは aws cognito-idp sign-up コマンドで実施できます。

• sign-up — AWS CLI 1.16.239 Command Reference

サインアップには、E-mailの検証が必要になります。ユーザー検証用のメールが配信されるので、必ず自分で受信可能なメールアドレスを設定してください。

$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="email@example.com"
$ PASSWORD="Password01@"
$ aws cognito-idp sign-up \
  --client-id ${CLIENT_ID} \
  --username ${USER_EMAIL} \
  --password ${PASSWORD} \
  --user-attribute "Name=email,Value=${USER_EMAIL}"

サインアップするとCognitoユーザープールにユーザーが追加されていることが確認できます。 ただし、アカウントのステータスは UNCONFIRMED であり、検証が完了するまでサインインはできません。

Verification Codeがユーザー登録で設定したE-mailに送信されるので確認して、メモしておきます。

次にユーザー検証をします。
AWS CLIでは aws cognito-idp confirm-sign-up コマンドで実施できます。

• confirm-sign-up — AWS CLI 1.16.239 Command Reference

$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="email@example.com"
$ CONFIRMATION_CODE=000000
$ aws cognito-idp confirm-sign-up \
  --client-id ${CLIENT_ID} \
  --username ${USER_EMAIL} \
  --confirmation-code ${CONFIRMATION_CODE}

検証が終わるとCognitoユーザープールのユーザーのステータスが CONFIRMED に変わっていることがわかります。E-mailの検証も終わり、このユーザーはサインイン可能な状況になりました。

Cognitoのサインイン

次にCognitoのサインインをしてみます。
AWS CLIでは aws cognito-idp admin-initiate-auth コマンドで実施できます。

• admin-initiate-auth — AWS CLI 1.16.239 Command Reference

$ USER_POOL_ID=us-west-2_xxxxxxxxx
$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="email@example.com"
$ PASSWORD="Password01@"
$ aws cognito-idp admin-initiate-auth \
  --user-pool-id ${USER_POOL_ID} \
  --client-id ${CLIENT_ID} \
  --auth-flow ADMIN_NO_SRP_AUTH \
  --auth-parameters "USERNAME=${USER_EMAIL},PASSWORD=${PASSWORD}"

サインインすると、こんな形でアクセストークン・リフレッシュトークン・IDトークンが返ってきます。

トークンについてはこちらのブログで詳しく書いたのでご参照ください。

• Cognitoのサインイン時に取得できる、IDトークン・アクセストークン・更新トークンを理解する ｜ DevelopersIO

API Gatewayの認証では、IDトークンを使用するので --query を使ってIDトークンだけ取り出します。

$ ID_TOKEN=$(aws cognito-idp admin-initiate-auth \
  --user-pool-id ${USER_POOL_ID} \
  --client-id ${CLIENT_ID} \
  --auth-flow ADMIN_NO_SRP_AUTH \
  --auth-parameters "USERNAME=${USER_EMAIL},PASSWORD=${PASSWORD}" \
  --query "AuthenticationResult.IdToken" | sed "s/\"//g") && echo ${ID_TOKEN}

API Gatewayで認証してアクセスする

API Gateway作成時にも言及しましたが、API GatewayではCognitoをオーサライザーに設定している場合、Authorizationヘッダに、Cognitoで発行した期限切れでないIDトークンを指定することでAPIが呼び出せます。
ちなみに、Cognitoにより発行されたIDトークンは１時間以内に有効期限切れになるので注意が必要です。

• Amazon Cognito ユーザープールに統合された REST API を呼び出す - Amazon API Gateway

curl コマンドを利用して、ヘッダにIDトークンを付与してAPI Gatewayにアクセスしてみます。

$ API_GATEWAY_URL=https://xxxxxxxxxx.execute-api.us-west-2.amazonaws.com/test
$ curl -H "Authorization:${ID_TOKEN}" ${API_GATEWAY_URL}/pets
[
  {
    "id": 1,
    "type": "dog",
    "price": 249.99
  },
  {
    "id": 2,
    "type": "cat",
    "price": 124.99
  },
  {
    "id": 3,
    "type": "fish",
    "price": 0.99
  }
]

無事にCognitoのユーザーでAPI Gatewayのユーザー認証ができました。

終わりに

プログラミング無しでCognitoのサインアップ、サインイン、ユーザー認証を試してみました。

実際にプログラムでCognitoを使って新規ユーザー登録、サインイン、ユーザー認証をやってみるのは、こちらの弊社ブログがとても参考になると思います。

• AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~バックエンド編~ ｜ DevelopersIO

Cognitoは試してみるまでのハードルが高いのですが、ユーザー認証をマネージドにやってくれて、そのための機能がいろいろそろっているのでとても便利です。
本ブログがCognitoを検証する際の助けになれば幸いです。